<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic CheckGroup - jQuery EasyUI Demo</title>
	<script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
	<h2>Basic CheckGroup</h2>
	<form id="ff">
		<div class="easyui-panel" style="width:100%;max-width:400px;padding:10px;">
			<div class="easyui-checkgroup" data-options="name:'check1',data:groupData"></div>
		</div>
		<div class="easyui-panel" style="width:100%;max-width:400px;padding:10px;margin-top:10px">
			<div class="easyui-checkgroup" data-options="name:'check2',data:groupData,dir:'v'"></div>
		</div>
		
		<div class='easyui-linkbutton' onclick=' var options = $("#checkgroup").checkgroup("options");var json=JSON.stringify(options);$.messager.tip(json,"info");'>查看options</div>
		<div class='easyui-linkbutton' onclick=' var value = $("#checkgroup").checkgroup("getValue");var json=JSON.stringify(value);$.messager.tip(json,"info");'>获取值</div>
		<div class="easyui-panel" style="width:100%;max-width:400px;padding:10px;margin-top:10px">
			<div id="checkgroup"></div>
		</div>
	</form>
	<script>
		var groupData = [{
			value:'1',
			label:'Item1'
		},{
			value:'2',
			label:'Item2',
			disabled:true
		},{
			value:'3',
			label:'Item3'
		},{
			value:'4',
			label:'Item4'
		},{
			value:'5',
			label:'Item5'
		}];
		
		$(document).ready(function(){
			$("#checkgroup").checkgroup({
				name:"test",
				value:["data中的值"],
				data:groupData,
				dir:'v',/* 复选框排列方式 'h'(horizontal) or 'v'(vertical) */
				itemStyle:{ height:30,width:150 },
				labelWidth:1200,
				labelPosition:'before',/* 标签位于复选框位置 'before','after' */
				labelAlign:'right' /* 每个checkbox对齐方式 'left','right' */
				
				,onChange:function(value){
					$.messager.tip({
						msg:JSON.stringify(value),
						icon:'info'
					});
				}
			});
			console.log("asdf");
		});
		
	</script>
</body>
</html>